<template>
    <div style="padding:20px">
        <el-button type="success" @click="addGroupDialogVisible = true;">创建班级</el-button>
        <el-button type="primary" @click="exportUserXlsx">导出班级</el-button>
        <el-button type="danger" @click="deleteUser">删除班级</el-button>
    </div>
    <el-table :data="groupTableData" @selection-change="userTableSeletionChange($event)"
        style="width: 100%; margin-bottom: 20px" row-key="id" border>
        <el-table-column type="selection" prop="groupId" label="班级Id" />
        <el-table-column prop="groupName" label="班级名称" />
        <el-table-column prop="leader.nickname" label="班主任" />
        <el-table-column prop="groupName" label="创建日期" />
        <el-table-column prop="groupCount" label="人数" />
        <el-table-column>
            <template #header>
                <el-input v-model="searchUsername" size="small" placeholder="搜索班级" />
                操作
            </template>
            <template #default="scope">
                <el-button size="small" @click="groupEdit(scope.row)">编辑</el-button>
                <el-button size="small" @click="addRememberDialogVisible = true;
willAddCollegeId = scope.row.groupId">新增</el-button>
                <el-button size="small" @click="queryRemember(scope.$index)">成员</el-button>
                <el-popconfirm title="确定要删除此班级吗？" @confirm="deleteGroup">
                    <template #reference>
                        <el-button size="small" type="danger">解散</el-button>
                    </template>
                </el-popconfirm>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="addGroupDialogVisible" title="创建一个班级" style="max-width:500px">
        <el-form :model="addGroupForm" class="demo-form-inline">
            <el-form-item label="班级全名">
                <el-input v-model="addGroupForm.groupName" />
            </el-form-item>
            <el-form-item label="班主任">
                <el-autocomplete style="width:100%" v-model="addGroupForm.leaderUsername"
                    :fetch-suggestions="querySearchAsync" placeholder="输入用户名自动搜索" @select="teacherHandleSelect" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addGroupDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addGroup">
                    创建
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="editGroupDialogVisible" title="修改班级信息" style="max-width:500px">
        <el-form :model="addGroupForm" class="demo-form-inline">
            <el-form-item label="班级全名">
                <el-input v-model="addGroupForm.groupName" />
            </el-form-item>
            <el-form-item label="班主任">
                <el-autocomplete style="width:100%" v-model="addGroupForm.leaderUsername"
                    :fetch-suggestions="querySearchAsync" placeholder="输入用户名自动搜索" @select="teacherHandleSelect" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editGroupDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateGroup">
                    修改
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="rememberDialogTableVisible" title="查看成员" style="max-width:500px">
        <el-table :data="groupRememberTableData" height="400">
            <el-table-column property="username" label="用户名" />
            <el-table-column property="nickname" label="昵称" />
            <el-table-column property="sex" label="性别" />
            <el-table-column>
                <template #default="scope">
                    <el-popconfirm title="确定要删除此成员吗？" @confirm="deletRember(scope)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="addGroup">导出成员列表</el-button>
                <el-button @click="rememberDialogTableVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="addRememberDialogVisible" title="添加成员" style="max-width:500px">
        <el-form-item label="搜索成员">
            <el-autocomplete style="width:100%" v-model="addGroupForm.leaderUsername"
                :fetch-suggestions="queryUserAsync" placeholder="输入用户名自动搜索" @select="userHandleSelect" />
        </el-form-item>
        <el-table :data="willBeMember">
            <el-table-column property="username" label="用户名" />
            <el-table-column property="nickname" label="昵称" />
            <el-table-column property="sex" label="性别" />
            <el-table-column>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="removeOneWillBeMember(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addRememberDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="groupMemberUpdate">添加</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            props: null,
            addGroupDialogVisible: false,
            rememberDialogTableVisible: false,
            addRememberDialogVisible: false,
            editGroupDialogVisible: false,
            editGroupModel: false,
            groupTableData: [],
            addGroupForm: {
                groupId: 0,
                groupName: '',
                groupLeaderId: 0,
                leaderUsername: '',
                groupCollegeId: 0,
            },
            willBeMember: [],
            willAddCollegeId: -1,
            groupRememberTableData: []
        }
    }, created() {
        this.queryGroupList()
    },
    methods: {
        querySearchAsync(username, callback) {
            if (username == null || username == '') return
            this.$request.get('/admin/group/search_teacher?username=' + username).then(data => {
                let teacherData = data.data
                let teacherArray = []
                teacherData.forEach(teacher => {
                    teacherArray.push({ value: teacher.username + ' ( ' + teacher.nickname + ' ) ', link: teacher })
                })
                callback(teacherArray)
            })
        },
        queryUserAsync(username, callback) {
            if (username == null || username == '') return
            this.$request.get('/admin/group/search_user?username=' + username).then(data => {
                let userList = data.data
                let userArray = []
                userList.forEach(user => {
                    userArray.push({ value: user.username + ' ( ' + user.nickname + ' ) ', link: user })
                })
                callback(userArray)
            })
        },
        teacherHandleSelect(teacher) {
            // console.log(teacher);
            this.addGroupForm.leader = teacher.link
            this.addGroupForm.groupLeaderId = teacher.link.userId
            this.addGroupForm.groupCollegeId = teacher.link.collegeId
        },
        userHandleSelect(user) {
            this.willBeMember.push(user.link)
        },
        addGroup() {
            this.$request.post('/admin/group/group_add', this.addGroupForm).then(resp => {
                this.$ElMessage({
                    message: resp.success ? '操作成功' : '操作失败',
                    type: resp.success ? 'success' : 'error',
                })
                if (resp.success) this.addGroupDialogVisible = false
                this.queryGroupList()
            })
        },
        removeOneWillBeMember(index) {
            this.willBeMember.pop(this.willBeMember[index])
        },
        groupEdit(row) {
            this.editGroupModel = true
            this.editGroupDialogVisible = true
            this.addGroupForm = row
            this.addGroupForm.leaderUsername = row.leader.username + ' ( ' + row.leader.nickname + ' )'
            // this.addGroupDialogVisible=true
        },
        queryGroupList() {
            this.$request.get('/admin/group/group_list').then(data => {
                this.groupTableData = data.data.data
            })
        },
        queryRemember(row) {
            this.rememberDialogTableVisible = true
            this.groupRememberTableData = this.groupTableData[row].studentList
        },
        groupMemberUpdate() {
            let userIds = '';
            this.willBeMember.forEach(user => {
                userIds = userIds + user.userId + ','
            })
            let requestMap = {
                userIds: userIds, groupId: this.willAddCollegeId
            }

            this.$request.post('/admin/group/member_add', JSON.stringify(requestMap)).then(resp => {
                this.$ElMessage({
                    message: resp.success ? '操作成功' : '操作失败',
                    type: resp.success ? 'success' : 'error',
                })
                if (resp.success) {
                    this.addRememberDialogVisible = false
                    this.willBeMember = []
                }
                this.queryGroupList()
            })
        },
        updateGroup() {
            this.$request.post('/admin/group/group_update', JSON.stringify(this.addGroupForm)).then(resp => {
                this.$ElMessage({
                    message: resp.success ? '操作成功' : '操作失败',
                    type: resp.success ? 'success' : 'error',
                })
                if (resp.success) this.editGroupDialogVisible = false
                this.queryGroupList()
            })
        },
        deletRember(scope) {
            this.$request.get('/admin/group/member_remove?userId=' + scope.row.userId).then(resp => {
                this.$ElMessage({
                    message: resp.success ? '操作成功' : '操作失败',
                    type: resp.success ? 'success' : 'error',
                })
                if (resp.success) {
                    this.groupRememberTableData.pop(scope.row)
                }
                this.queryGroupList()
            })
        },
        deleteGroup() { }
    }

}
</script>

<style scoped>

</style>